<template>
  <div class="department">
    <el-form :model="form" ref="formRef" inline>
      <el-row>
        <el-col :span="8">
          <el-form-item label="">
            <el-input v-model="form.searchName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button :icon="Search" @click="getTableData" style="margin-left: 12px"> 搜索 </el-button>
            <el-button :icon="Close" type="info" @click="getTableData('reaset')"> 重置 </el-button>
            <el-button :icon="Plus" type="primary" @click="addBtn"> 新增 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData.list" height="calc(100% - 52px)" v-loading="loading" row-key="id" border default-expand-all :tree-props="{ children: 'children' }">
      <el-table-column prop="name" label="部门名称" header-align="center" align="left" />
      <el-table-column prop="deptCode" label="部门编码" align="center" />
      <el-table-column prop="deptPhone" label="部门电话" align="center" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" @click="editBtn(row)"> 编辑 </el-button>
          <el-popconfirm icon-color="red" title="确定删除该项内容吗?" confirmButtonText="是" cancelButtonText="否" @confirm="deleteBtn(row.id)">
            <template #reference>
              <el-button type="danger" :icon="Close"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹框 -->
    <z-modal ref="modalRef" :title="title" :show="show" :width="500" :height="300" @close="show = false" @cancel="show = false" @sure="sure">
      <div class="modal-main">
        <div style="height: 1500px">请开始你的表演</div>
      </div>
    </z-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, Plus, Edit, Close } from '@element-plus/icons-vue'
import { departmentList } from '@/api/system'

// table的新增、编辑、删除逻辑
import addEditDel from './addEditDel'
const { modalRef, title, show, addBtn, editBtn, sure, deleteBtn } = addEditDel(getTableData)

interface searchParam {
  searchName: string
}
const formRef = ref()
const form: searchParam = reactive({ searchName: '' }) // form数据
const tableData: any = reactive({ list: [] }) // table列表数据
const loading = ref<boolean>(false) // table加载动画

// 表格数据的 获取/搜索/重置
function getTableData(str?: string) {
  loading.value = true
  if (str === 'reaset') {
    form.searchName = ''
  }
  departmentList(form)
    .then(res => {
      tableData.list = res.data || []
    })
    .catch(() => {})
    .finally(() => (loading.value = false))
}

onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.department {
  min-width: 600px;
  height: 100%;
}
</style>
